<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
<!-- 输入框，用于输入要发送的消息 -->
<input type="text" id="messageInput" placeholder="请输入要发送的消息" />
<!-- 按钮，点击触发 sendMessage 函数发送消息 -->
<button onclick="sendMessage()">发送信息</button>
<!-- 用于显示消息的区域 -->
<div id="messageDisplay"></div>
<script>
    // 创建 WebSocket 实例，连接到指定的服务器地址
    const socket = new WebSocket('ws://localhost:8080');

    // 监听连接建立事件
    socket.addEventListener('open', (event) => {
        console.log('Connected to the WebSocket server');
        // 调用 showMessage 函数，在页面显示连接成功的消息
        showMessage('已成功连接到 WebSocket 服务器');
    });

    // 监听消息接收事件
    socket.addEventListener('message', (event) => {
        console.log('Received message from server:', event.data);
        // 调用 showMessage 函数，在页面显示接收到的服务器消息
        showMessage(`收到服务器消息: ${event.data}`);
    });

    // 监听连接关闭事件
    socket.addEventListener('close', (event) => {
        console.log('Disconnected from the WebSocket server');
        // 调用 showMessage 函数，在页面显示连接关闭的消息
        showMessage('与 WebSocket 服务器的连接已断开');
    });

    // 监听错误事件
    socket.addEventListener('error', (event) => {
        console.error('WebSocket error:', event);
        // 调用 showMessage 函数，在页面显示错误消息
        showMessage('WebSocket 连接出现错误，请检查服务器状态');
    });

    // 显示消息到页面的函数
    function showMessage(message) {
        const messageDisplay = document.getElementById('messageDisplay');
        const newMessage = document.createElement('p');
        newMessage.textContent = message;
        messageDisplay.appendChild(newMessage);
    }

    // 发送消息的函数
    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value;
        if (message) {
            if (socket.readyState === WebSocket.OPEN) {
                // 若连接处于打开状态，发送消息
                socket.send(message);
                // 调用 showMessage 函数，在页面显示已发送的消息
                showMessage(`已发送消息: ${message}`);
                // 清空输入框
                input.value = '';
            } else {
                // 若连接未打开，在页面显示无法发送消息的提示
                showMessage('无法发送消息，WebSocket 连接未打开');
            }
        }
    }
</script>
</body>
</html>